<template>
    <div class="table-box">
        <el-card shadow="never">
            <template #header>
                <div class="card-header">
                    <div class="title bold">车辆信息总览</div>
                </div>
            </template>
            <el-row>
                <el-col :span="24">
                    <div class="block">
                        <el-date-picker v-model="value2" type="datetimerange" start-placeholder="YYYY/MM/DD"
                            end-placeholder="YYYY/MM/DD" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                            time-format="A hh:mm:ss" />
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-row class="carplate-box">
                        <el-card class="carplate">粤C12345</el-card>
                        <el-card class="carplate">粤C12345</el-card>
                    </el-row>
                </el-col>
                <el-col :span="12">
                    <CarMap></CarMap>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import CarMap from "./carRightMap.vue";
const value2 = ref('')
</script>

<style lang="scss" scoped>
.title {
    color: #403d70;
    font-size: 16px;
}

.carplate-box {
    display: flex;
    justify-content: space-between;

    .carplate {
        width: 48%;
        margin-top: 10px
    }
}

.el-card {
    border: none;
}
</style>
